<template>
	<view>
		<NavBar title="搜索酒店" :isScroll="!showNav" />
		<view class="search-box">
			<view class="search-top zdy-flex zdy-flex-center">
				<view class="search-city" @click="cityShow = true">
					<span>{{ filterCity(params.city) }}</span>
					<u-icon name="arrow-down-fill" color="#333333" size="11" bold></u-icon>
				</view>
				<view class="separate"></view>
				<view class="zdy-flex zdy-flex-center">
					<view class="search-date" @click="dateShow = true">
						<view class="">{{ weekShow.startDay }} 住</view>
						<view class="">{{ weekShow.endDay }} 离</view>
					</view>
					<view class="" style="margin: 0 12rpx">
						<u-icon name="arrow-down" color="#333333" size="11" bold></u-icon>
					</view>
				</view>
				<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="输入位置关键词搜索" border="none" v-model="params.searchValus"></u--input>
			</view>
			<!-- 筛选器 -->
			<view class="filter-container">
				<sl-filter :ref="'slFilter'" color="#666666" themeColor="#149E99" :menuList="menuList" @result="result"></sl-filter>
			</view>
			<view class="house-item" v-for="item in roomList" :key="item.id" @click="goDetails(item)">
				<u--image :showLoading="true" radius="10rpx 10rpx 0 0" src="/static/img/home/shenghuo.png" width="100%" height="400rpx"></u--image>
				<view class="house-item-bottom">
					<view class="u-line-1 houseName">{{ item.name }}</view>
					<view class="u-line-1 houseDistance">距您5.6km</view>
					<view class="room-price zdy-flex zdy-flex-align-center">
						<text>￥</text>
						<text class="price">1800</text>
						<text>起</text>
						<!-- <span class="tags-item" v-for="item in 3" :key="item">近地铁</span> -->
					</view>
				</view>
			</view>
			<u-loadmore :status="loadmoreStatus" line v-if="roomList.length > 6" />
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text=" " v-if="!roomList.length"></u-empty>
		</view>
		<!-- 日历 -->
		<u-calendar
			:defaultDate="[params.startDate, params.endDate]"
			closeOnClickOverlay
			@close="dateShow = false"
			color="#85DCD6"
			:show="dateShow"
			mode="range"
			@confirm="confirmDate"
		></u-calendar>
		<!-- 城市选择 -->
		<u-picker
			:show="cityShow"
			closeOnClickOverlay
			confirmColor="#85DCD6"
			@cancel="cityShow = false"
			@close="cityShow = false"
			@confirm="confirmCity"
			:columns="[cityList]"
			keyName="label"
		></u-picker>
	</view>
</template>

<script>
import { cityList, menuList } from '@/utils/defaultParams.js';
import { getRoomList } from '@/api/house.js';
export default {
	data() {
		return {
			params: {},
			roomList: [],
			loadmoreStatus: 'nomore',
			noData: false,
			cityShow: false, //城市选择
			showNav: true, //隐藏导航栏背景
			dateShow: false, //日历弹窗
			menuList, //筛选列表
			cityList //地区列表
		};
	},
	onPageScroll(e) {
		this.showNav = e.scrollTop < 5;
	},
	onReachBottom() {
		if (!this.noData) {
			this.getRoomList();
		}
	},
	onLoad(params) {
		this.params = JSON.parse(params.params);
		this.getRoomList();
	},
	computed: {
		weekShow() {
			//展示的时间
			const dateInfo = { startDay: '', endDay: '' };
			//已选择的时间
			const { startDate, endDate } = this.params;
			//格式化时间
			const start = new Date(startDate);
			const end = new Date(endDate);
			dateInfo.startDay = this.disposeDate(start);
			dateInfo.endDay = this.disposeDate(end);
			return dateInfo;
		}
	},
	methods: {
		//过滤城市
		filterCity(value) {
			return this.cityList.filter((item) => {
				return item.value == value;
			})[0]?.label;
		},
		//筛选接口
		async result(val) {
			this.params.page = 1;
			this.filterResult = JSON.stringify(val, null, 2);
			this.params.whole = val.whole;
			if (!val.price) {
				this.params.price_low = -1;
				this.params.price_high = -1;
			} else {
				this.params.price_low = val.price.split('-')[0];
				this.params.price_high = val.price.split('-')[1];
			}
			if (!val.max_distance) {
				this.params.max_distance = 1;
			} else {
				this.params.max_distance = val.max_distance;
			}
		},
		disposeDate(date) {
			let dateArr = this.$filterTime({ date, isHours: false }).split('-');
			dateArr.splice(0, 1);
			dateArr = dateArr.join('-');
			return dateArr;
		},
		confirmCity(value) {
			this.params.city = value.value[0].value;
			this.cityShow = false;
		},
		confirmDate(date) {
			this.params.startDate = date[0];
			this.params.endDate = date[date.length - 1];
			this.dateShow = false;
		},
		goDetails(item) {
			const { startDate, endDate } = this.params;
			this.$tn('/housing/details?params=' + JSON.stringify({ startDate, endDate, roomId: item.id }));
		},
		getRoomList() {
			this.loadmoreStatus = 'loading';
			getRoomList(this.params).then((res) => {
				if (res.list.length < this.params.size) {
					this.noData = true;
					this.loadmoreStatus = 'nomore';
				} else {
					this.noData = false;
					this.params.page += 1;
				}
				this.roomList = this.roomList.concat(res.list);
			});
		}
	}
};
</script>

<style>
page {
	background-color: #e6f8f7 !important;
}
</style>
<style scoped lang="scss">
.search-box {
	margin: 30rpx;
	padding-bottom: 50rpx;
	.search-top {
		padding: 10rpx 20rpx;
		background: #ffffff;
		border-radius: 32rpx;
		.search-city {
			span {
				margin-right: 12rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.separate {
			margin: 0 20rpx;
			width: 1rpx;
			height: 24rpx;
			background: #d8dbdb;
			border-radius: 1rpx;
		}
		.search-date {
			font-weight: bold;
			font-size: 20rpx;
			color: #333333;
		}
	}
	.filter-container {
		margin: 0 -30rpx;
		::v-deep .select-tab {
			background-color: transparent;
		}
	}
	.house-item {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		.house-item-bottom {
			padding: 0 25rpx 25rpx;
			.houseName {
				margin: 20rpx 0;
				font-weight: bold;
				color: #333333;
			}
			.houseDistance {
				margin-bottom: 20rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
			}
			.tags-item {
				width: fit-content;
				margin-right: 8rpx;
				padding: 4rpx 10rpx;
				background: #dff6f4;
				border-radius: 4rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #149e99;
			}
			.tags-item:first-of-type {
				margin-left: 50rpx;
			}
			.room-price {
				margin-left: auto;
				font-weight: bold;
				font-size: 24rpx;
				color: #ff3a3a;
				.price {
					font-family: DIN;
					font-size: 32rpx;
				}
			}
		}
	}
	::v-deep .u-empty {
		margin-top: 130rpx !important;
	}
}
</style>
